.rpv-core__arrow {
  position: absolute;
  z-index: 0;
  width: 10px;
  height: 10px;
  border-top-color: var(--rpv-core__arrow-border-color);
  border-right: 1px solid var(--rpv-core__arrow-border-color);
  border-bottom: 1px solid var(--rpv-core__arrow-border-color);
  border-left-color: var(--rpv-core__arrow-border-color);

  &--tl {
    bottom: 0;
    left: 0;
    transform: translate(50%, 50%) rotate(45deg);
  }

  &--tc {
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%) rotate(45deg);
  }

  &--tr {
    right: 0;
    bottom: 0;
    transform: translate(-50%, 50%) rotate(45deg);
  }

  &--rt {
    top: 0;
    left: 0;
    transform: translate(-50%, 50%) rotate(135deg);
  }

  &--rc {
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%) rotate(135deg);
  }

  &--rb {
    bottom: 0;
    left: 0;
    transform: translate(-50%, -50%) rotate(135deg);
  }

  &--bl {
    top: 0;
    left: 0;
    transform: translate(50%, -50%) rotate(225deg);
  }

  &--bc {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%) rotate(225deg);
  }

  &--br {
    top: 0;
    right: 0;
    transform: translate(-50%, -50%) rotate(225deg);
  }

  &--lt {
    top: 0;
    right: 0;
    transform: translate(50%, 50%) rotate(315deg);
  }

  &--lc {
    top: 50%;
    right: 0;
    transform: translate(50%, -50%) rotate(315deg);
  }

  &--lb {
    right: 0;
    bottom: 0;
    transform: translate(50%, -50%) rotate(315deg);
  }
}
